<template>
  <div class="todo-compact-item" :class="{ 'completed': todo.status === TodoStatus.COMPLETED, 'is-selected': selected }">
    <!-- 完成图标 -->
    <img v-if="todo.status === TodoStatus.COMPLETED" src="../../../assets/icon/finish.svg" alt="已完成" class="finish-icon" />

    <!-- 置顶图标 -->
    <img v-if="todo.isTop" src="@/assets/icon/top.svg" alt="置顶" class="top-icon" />

    <!-- 内容区域 -->
    <div class="todo-content" @click="handleItemClick" @dblclick="handleItemDblClick">
      <span class="todo-title" :class="{ 'completed': todo.status === TodoStatus.COMPLETED }">
        <el-tag v-if="showCategoryName && todo.categoryName" size="small" :color="category?.color || '#909399'" class="category-name-tag" effect="light">
          {{ todo.categoryName }}
        </el-tag>
        {{ todo.title || '未命名待办事项' }}
      </span>
      
      <!-- 待办内容 -->
      <div v-if="todo.content" class="todo-description">
        <MarkdownRenderer :content="todo.content" theme="classic" />
      </div>
      
      <!-- 分类标识 -->
      <el-tag 
        v-if="category" 
        size="small" 
        class="category-tag"
      >
        {{ category.name }}
      </el-tag>
    </div>
    
    <!-- 操作按钮 -->
    <div class="todo-actions">
      <el-button
        type="success"
        :icon="Check"
        size="small"
        circle
        @click="handleComplete"
        title="完成"
        :disabled="todo.status === TodoStatus.COMPLETED || todo.status === TodoStatus.CANCELLED"
      />
      <el-button
        type="warning"
        :icon="Top"
        size="small"
        circle
        @click="handlePin"
        title="置顶"
      />
      <el-button
        :icon="Star"
        size="small"
        circle
        @click="handleFavorite"
        :title="todo.isFavorite ? '取消收藏' : '收藏'"
      />
      <el-button
        type="primary"
        :icon="Edit"
        size="small"
        circle
        @click="handleEdit"
        title="编辑"
      />
      <el-button
        type="danger"
        :icon="Delete"
        size="small"
        circle
        @click="handleDelete"
        title="删除"
      />
    </div>
    
  </div>
</template>

<script setup lang="ts">
import { ElTag, ElButton, ElMessageBox } from 'element-plus'
import { Edit, Delete, Check, Top, Star } from '@element-plus/icons-vue'
import type { TodoItem, TodoCategory, UpdateTodoRequest } from '../types'
import { TodoStatus } from '../types'
import MarkdownRenderer from '@/components/MarkdownRenderer.vue'

interface Props {
  todo: TodoItem
  category?: TodoCategory
  categories?: TodoCategory[]
  showCategoryName?: boolean
  selected?: boolean
}

interface Emits {
  (e: 'update', id: string, request: UpdateTodoRequest): void
  (e: 'delete', id: string): void
  (e: 'toggle', id: string): void
  (e: 'detail', id: string): void
  (e: 'select', id: string): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 处理项目单击 - 选中
const handleItemClick = () => {
  emit('select', props.todo.id)
}

// 处理项目双击 - 跳转到详情页
const handleItemDblClick = () => {
  emit('detail', props.todo.id)
}

// 处理完成
const handleComplete = () => {
  emit('update', props.todo.id, { status: TodoStatus.COMPLETED })
}

// 处理置顶
const handlePin = () => {
  emit('update', props.todo.id, { isTop: !props.todo.isTop })
}

// 处理收藏
const handleFavorite = () => {
  emit('update', props.todo.id, { isFavorite: !props.todo.isFavorite })
}

// 处理编辑
const handleEdit = () => {
  emit('update', props.todo.id, props.todo)
}

// 处理删除
const handleDelete = async () => {
  try {
    await ElMessageBox.confirm('确定要删除这个待办事项吗？', '删除确认', {
      type: 'warning',
      confirmButtonText: '删除',
      cancelButtonText: '取消'
    })
    emit('delete', props.todo.id)
  } catch {
    // 用户取消删除
  }
}

</script>

<style scoped>
.todo-compact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-light);
  border-radius: 6px;
  transition: all 0.2s ease;
  width: 280px;
  flex-shrink: 0;
}

.todo-compact-item:hover {
  border-color: var(--el-color-primary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.todo-compact-item.completed {
  opacity: 0.7;
  background: var(--el-fill-color-light);
}

.todo-compact-item.is-selected {
  border-color: var(--el-color-primary);
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}

.finish-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 0 4px;
}

.top-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0 4px;
}

.todo-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  cursor: pointer;
  padding: 4px;
  margin: -4px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.todo-content:hover {
  background-color: var(--el-fill-color-light);
}

.todo-title {
  font-size: 14px;
  color: var(--el-text-color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.category-name-tag {
  flex-shrink: 0;
  color: #fff !important;
}

.todo-title.completed {
  text-decoration: line-through;
  color: var(--el-text-color-disabled);
}

.todo-description {
  font-size: 12px;
  color: var(--el-text-color-regular);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.todo-description :deep(.markdown-content) {
  font-size: 12px;
  line-height: 1.4;
}

.priority-tag {
  flex-shrink: 0;
}

.category-tag {
  flex-shrink: 0;
}

.todo-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  opacity: 1;
}

/* 深色模式适配 */
.dark .todo-compact-item {
  background: #303030;
  border-color: #3a3a3a;
}

.dark .todo-compact-item:hover {
  border-color: var(--el-color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark .todo-compact-item.completed {
  background: #282828;
}

.dark .todo-compact-item.is-selected {
  border-color: var(--el-color-primary);
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.2);
}
</style>